import { useDispatch, useSelector } from "react-redux";
import { Button, NavBar } from "antd-mobile";
import "./style.css";

import { useNavigate } from "react-router-dom";
import { citySetDate } from "../../reducers/citySlice";
import FooterMy from "./FooterMy";
import dayjs from "dayjs";
import TableList from "./TableList";

function Query() {
    const citySlice = useSelector((state) => state.citySlice);

    const nav = useNavigate();
    const dispatch = useDispatch();

    // http://113.44.139.133:8005/trip/train

    const back = () => {
        nav(-1);
    };

    return (
        <div className="query_box">
            <NavBar onBack={back} className="nav_bg">
                {citySlice.start} - {citySlice.end}
            </NavBar>
            <div
                style={{
                    display: "flex",
                    justifyContent: "space-between",
                    padding: "5px 10px",
                    alignItems: "center",
                }}
            >
                <Button
                    disabled={
                        dayjs(citySlice.date).diff(dayjs(), "day", true) <= 0
                    }
                    size="small"
                    onClick={() => {
                        const nDate = dayjs(citySlice.date)
                            .add(-1, "day")
                            .format("YYYY-MM-DD");
                        dispatch(citySetDate(nDate));
                    }}
                >
                    前一天
                </Button>
                <span>{citySlice.date}</span>
                <Button
                    disabled={
                        dayjs(citySlice.date).diff(dayjs(), "day", true) >= 13
                    }
                    size="small"
                    onClick={() => {
                        const nDate = dayjs(citySlice.date)
                            .add(1, "day")
                            .format("YYYY-MM-DD");
                        dispatch(citySetDate(nDate));
                    }}
                >
                    后一天
                </Button>
            </div>
            <TableList />
            <FooterMy />
        </div>
    );
}

export default Query;
